<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="../libs/twaver.js"></script>
  <script src="../libs/stats.min.js"></script>
  <script>
  function init() {
    var box = new twaver.ElementBox();
    var network = new twaver.vector.Network(box);
    twaver.Defaults.CENTER_LOCATION = true;
    document.body.appendChild(network.getView());
    network.getView().style.background = '#333';
    network.adjustBounds({
      x: 0,
      y: 0,
      width: 1500,
      height: 800
    });

    var stats = new Stats();
    stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
    document.body.appendChild(stats.dom);

    twaver.Util.registerImage('chart', {
      v: [{
        shape: 'draw',
        draw: function(ctx, data, view) {
          stats.begin();
          var canvas = this.canvas,
            g = this.g,
            gradient = this.gradient,
            gradient2 = this.gradient2,
            diameter = Math.floor(data.getWidth() * view.getZoom()),
            radius = diameter / 2,
            hueStart = 120,
            hueEnd = 170,
            hueDiff = Math.abs(hueEnd - hueStart),
            width = diameter,
            height = diameter;
          if (!canvas) {
            this.canvas = canvas = document.createElement('canvas');
          }

          if (width !== canvas.width || height !== canvas.height) {
            canvas.width = diameter;
            canvas.height = diameter;
            this.g = g = canvas.getContext('2d');
            this.gradient = gradient = g.createLinearGradient(radius, 0, 0, 0);
            gradient.addColorStop(0, 'hsla(' + hueStart + ', ' + 50 + '%, ' + 40 + '%, 1.0)');
            gradient.addColorStop(1, 'hsla(' + hueEnd + ', ' + 50 + '%, ' + 40 + '%, 0.1)');

            this.gradient2 = gradient2 = g.createLinearGradient(-radius, 0, 0, 0);
            gradient2.addColorStop(0, 'hsla(' + hueStart + ', ' + 50 + '%, ' + 40 + '%, 1.0)');
            gradient2.addColorStop(1, 'hsla(' + hueEnd + ', ' + 50 + '%, ' + 40 + '%, 0.1)');
          }

          g.globalCompositeOperation = 'destination-out'; //'destination-out';
          g.fillStyle = 'hsla(0, 0%, 0%, 0.1)';
          g.fillRect(0, 0, width, height);

          g.globalCompositeOperation = 'lighter';
          var i;
          for (i = 2; i < 3; i++) {
            g.beginPath();
            g.arc(radius, radius, ((radius - 1) / 4) * (i + 1), 0, Math.PI * 2, false);
            g.strokeStyle = 'hsla(' + (hueEnd - (i * (hueDiff / 4))) + ', ' + 50 + '%, ' + 40 + '%, 0.1)';
            g.lineWidth = 2;
            g.stroke();
          };

          g.beginPath();
          g.save();
          g.translate(radius, radius);
          g.rotate(data.getClient('angle'));
          g.arc(((radius - 1) / 4) * (2.5 + 1), 0, 4, 0, Math.PI * 2, false);
          g.fillStyle = gradient;
          g.fill();
          g.restore();

          g.beginPath();
          g.save();
          g.translate(radius, radius);
          g.rotate(data.getClient('angle'));
          g.arc(-((radius - 1) / 4) * (2.5 + 1), 0, 4, 0, Math.PI * 2, false);
          g.fillStyle = gradient2;
          g.fill();
          g.restore();

          ctx.scale(1 / view.getZoom(), 1 / view.getZoom());
          ctx.drawImage(canvas, -width / 2, -height / 2);
          stats.end();
        }
      }]
    });

    twaver.Util.registerImage('chart2', {
      v: [{
        shape: 'draw',
        draw: function(ctx, data, view) {
          var canvas = this.canvas,
            g = this.g,
            gradient = this.gradient,
            gradient2 = this.gradient2,
            diameter = Math.floor(data.getWidth() * view.getZoom()),
            radius = diameter / 2,
            hueStart = 120,
            hueEnd = 170,
            hueDiff = Math.abs(hueEnd - hueStart),
            width = diameter,
            height = diameter;
          if (!canvas) {
            this.canvas = canvas = document.createElement('canvas');
          }

          if (width !== canvas.width || height !== canvas.height) {
            canvas.width = diameter;
            canvas.height = diameter;
            this.g = g = canvas.getContext('2d');
            this.gradient = gradient = g.createLinearGradient(radius, 0, 0, 0);
            gradient.addColorStop(0, 'hsla(' + hueStart + ', ' + 50 + '%, ' + 40 + '%, 1.0)');
            gradient.addColorStop(1, 'hsla(' + hueEnd + ', ' + 50 + '%, ' + 40 + '%, 0.1)');

            this.gradient2 = gradient2 = g.createLinearGradient(-radius, 0, 0, 0);
            gradient2.addColorStop(0, 'hsla(' + hueStart + ', ' + 50 + '%, ' + 40 + '%, 1.0)');
            gradient2.addColorStop(1, 'hsla(' + hueEnd + ', ' + 50 + '%, ' + 40 + '%, 0.1)');
          }

          g.globalCompositeOperation = 'destination-out'; //'destination-out';
          g.fillStyle = 'hsla(0, 0%, 0%, 0.1)';
          g.fillRect(0, 0, width, height);

          g.globalCompositeOperation = 'lighter';
          var i;
          for (i = 2; i < 3; i++) {
            g.beginPath();
            g.arc(radius, radius, ((radius - 1) / 4) * (i + 1), 0, Math.PI * 2, false);
            g.strokeStyle = 'hsla(' + (hueEnd - (i * (hueDiff / 4))) + ', ' + 50 + '%, ' + 40 + '%, 0.1)';
            g.lineWidth = 2;
            g.stroke();
          };

          g.beginPath();
          g.save();
          g.translate(radius, radius);
          g.rotate(data.getClient('angle'));
          g.arc(((radius - 1) / 4) * (2.5 + 1), 0, 4, 0, Math.PI * 2, false);
          g.fillStyle = gradient;
          g.fill();
          g.restore();

          g.beginPath();
          g.save();
          g.translate(radius, radius);
          g.rotate(data.getClient('angle'));
          g.arc(-((radius - 1) / 4) * (2.5 + 1), 0, 4, 0, Math.PI * 2, false);
          g.fillStyle = gradient2;
          g.fill();
          g.restore();

          ctx.scale(1 / view.getZoom(), 1 / view.getZoom());
          ctx.drawImage(canvas, -width / 2, -height / 2);
        }
      }]
    });

    var node = new twaver.Node();
    node.setLocation(300, 200);
    node.setSize(200, 200);
    node.setImage('chart');
    node.setStyle('select.style', 'border');
    node.setStyle('select.color', '#309FC9');
    box.add(node);

    new twaver.Animate({
      source: node,
      attr: 'C@angle',
      from: Math.PI * 2,
      to: 0,
      dur: 4000,
      repeat: Number.POSITIVE_INFINITY,
      reverse: false,
      onUpdate: function(value) {
        // console.log(value);
      }
    }).play();

    var node2 = new twaver.Node();
    node2.setLocation(800, 200);
    node2.setSize(300, 300);
    node2.setImage('chart2');
    node2.setStyle('select.style', 'border');
    node2.setStyle('select.color', '#309FC9');
    box.add(node2);

    new twaver.Animate({
      source: node2,
      attr: 'C@angle',
      from: Math.PI * 2,
      to: 0,
      dur: 8000,
      repeat: Number.POSITIVE_INFINITY,
      reverse: false,
      onUpdate: function(value) {
        // console.log(value);
      }
    }).play();
  }
  </script>
</head>

<body onload="init();">
</body>

</html>